<template>
	<view class="content">
		<view class="content_line">
			<view class="content_line_first">
				<view class="content_lt_view"></view>
				<view class="content_rt_view"></view>
			</view>

			<view class="context_view">
				<image class="img_suancaishen" src="../static/result_suancaishen.png" mode="aspectFit"></image>
				<view style="width: 543rpx;height: 3rpx;background: #D45151;margin-top: 15rpx;"></view>
				<view
					style="width: 206rpx;height: 51rpx;border-style: solid;border-width: 3rpx;border-color: #D45151;margin-top: 18rpx;
				font-size: 27rpx; color: #D45151;display: flex;justify-content: center;align-items: center;line-height: 51rpx;"
				>
					{{ currentdate }}
				</view>
				<view style="width: 100%; height: 373rpx; display: flex;justify-content: space-between;align-items: center;margin-top: 23rpx;">
					<image :src="chongUrl" class="animation_chongsha" mode="aspectFit" style="width: 20%;"></image>
					<image :src="caishen" class="animation_caishen" mode="aspectFit" style="width: 55%; "></image>
					<image :src="shaUrl" class="animation_chongsha" mode="aspectFit" style="width: 20%;"></image>
				</view>
				<text class="animation_slogin" style="font-size: 23rpx;color: #484848;margin-top: 35rpx;line-height: 35rpx;">财运{{ t1Lucky }}</text>
				<text class="animation_slogin" style="width: 384rpx;font-size: 23rpx;color: #484848;text-align: center;line-height: 35rpx;">{{ myLuckMap.slogin }}</text>
				<view style="width: 543rpx;height: 2rpx;background: #D45151;margin-top: 32rpx;"></view>

				<view style="margin-top: 25rpx;">
					<view class="animation_lucky" style="width: 472rpx;font-size: 25rpx;color: #484848;display: flex;justify-content: space-between;">
						<view style="display: flex;align-items: center;">
							<view style="width: 15rpx;height: 15rpx;border-radius: 50%;background-color: #D45151;"></view>
							<Text style="margin-left: 13rpx;">{{ myLuckMap.t1.nowTime }}</Text>
						</view>
						<view v-bind:style="fontcssT1">
							<Text>{{ t1Lucky }}</Text>
						</view>
						<Text>财位：{{ myLuckMap.t1.caishen }}</Text>
					</view>
					<view class="animation_lucky" style="width: 472rpx;font-size: 25rpx;color: #484848;display: flex;justify-content: space-between;margin-top: 10rpx;">
						<view style="display: flex;align-items: center;">
							<view style="width: 15rpx;height: 15rpx;border-radius: 50%;background-color: #e8dccc;"></view>
							<Text style="margin-left: 13rpx;">{{ myLuckMap.t2.nowTime }}</Text>
						</view>
						<view v-bind:style="fontcssT2">
							<Text>{{ t2Lucky }}</Text>
						</view>
						<Text>财位：{{ myLuckMap.t2.caishen }}</Text>
					</view>
				</view>
				<button class="img_button" open-type="share"></button>
			</view>

			<view class="content_line_last">
				<view class="content_lb_view"></view>
				<view class="content_rb_view"></view>
			</view>
		</view>

	</view>
</template>

<script>
import helper from '../common/helper.js';
export default {
	data() {
		return {
			myLuckMap: {
				slogin: '',
				t1: {
					caishen: '',
					caiyun: '',
					chong: '',
					chongsha: '',
					nowTime: '',
					sha: ''
				},
				t2: {
					caishen: '',
					caiyun: '',
					chong: '',
					chongsha: '',
					nowTime: '',
					sha: ''
				}
			},
			t1Lucky: '',
			t2Lucky: '',
			// chongUrl:"https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/chong/",
			chongUrl: 'https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/chong/moren.png',
			// shaUrl:"https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/sha/",
			shaUrl: 'https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/sha/moren.png',
			caishen: 'https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/caiwei/moren.png',
			currentdate: '',
			fontcssT1: 'color:#484848',
			fontcssT2: 'color:#484848'
		};
	},
	created() {
		//获取当前日期
		var date = new Date();
		var seperator1 = ' · ';
		var year = date.getFullYear();
		var month = date.getMonth() + 1;
		var strDate = date.getDate();
		if (month >= 1 && month <= 9) {
			month = '0' + month;
		}
		if (strDate >= 0 && strDate <= 9) {
			strDate = '0' + strDate;
		}

		this.currentdate = year + seperator1 + month + seperator1 + strDate;

		this.myLuckMap = helper.myLucky;

		//运势
		switch (this.myLuckMap.t1.caiyun) {
			case -1:
				this.t1Lucky = '有点坏';
				break;
			case 0:
				this.t1Lucky = '不好不坏';
				break;
			case 1:
				this.t1Lucky = '有点好';
				this.fontcssT1 = 'color:#D45151';
				break;
		}

		switch (this.myLuckMap.t2.caiyun) {
			case -1:
				this.t2Lucky = '有点坏';
				break;
			case 0:
				this.t2Lucky = '不好不坏';
				break;
			case 1:
				this.t2Lucky = '有点好';
				this.fontcssT2 = 'color:#D45151';
				break;
		}

		//冲
		let url = 'https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/chong/';
		switch (this.myLuckMap.t1.chong) {
			case '鼠':
				// this.chongUrl = this.chongUrl + "shu.png";
				this.chongUrl = url + 'shu.png';
				break;
			case '牛':
				// this.chongUrl = this.chongUrl + "niu.png";
				this.chongUrl = url + 'niu.png';
				break;
			case '虎':
				// this.chongUrl = this.chongUrl + "hu.png";
				this.chongUrl = url + 'hu.png';
				break;
			case '兔':
				// this.chongUrl = this.chongUrl + "tu.png";
				this.chongUrl = url + 'tu.png';
				break;
			case '龙':
				// this.chongUrl = this.chongUrl + "long.png";
				this.chongUrl = url + 'long.png';
				break;
			case '蛇':
				// this.chongUrl = this.chongUrl + "she.png";
				this.chongUrl = url + 'she.png';
				break;
			case '马':
				// this.chongUrl = this.chongUrl + "ma.png";
				this.chongUrl = url + 'ma.png';
				break;
			case '羊':
				// this.chongUrl = this.chongUrl + "yang.png";
				this.chongUrl = url + 'yang.png';
				break;
			case '猴':
				// this.chongUrl = this.chongUrl + "hou.png";
				this.chongUrl = url + 'hou.png';
				break;
			case '鸡':
				// this.chongUrl = this.chongUrl + "ji.png";
				this.chongUrl = url + 'ji.png';
				break;
			case '狗':
				// this.chongUrl = this.chongUrl + "gou.png";
				this.chongUrl = url + 'gou.png';
				break;
			case '猪':
				// this.chongUrl = this.chongUrl + "zhu.png";
				this.chongUrl = url + 'zhu.png';
				break;
		}

		//煞
		switch (this.myLuckMap.t1.sha) {
			case '东':
				// this.shaUrl = this.shaUrl + "dong.png";
				this.shaUrl = 'https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/sha/' + 'dong.png';
				break;
			case '南':
				// this.shaUrl = this.shaUrl + "nan.png";
				this.shaUrl = 'https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/sha/' + 'nan.png';
				break;
			case '西':
				// this.shaUrl = this.shaUrl + "xi.png";
				this.shaUrl = 'https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/sha/' + 'xi.png';
				break;
			case '北':
				// this.shaUrl = this.shaUrl + "bei.png";
				this.shaUrl = 'https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/sha/' + 'bei.png';
				break;
		}

		//财神方位
		let caishenUrl = 'https://my-bucket-noworks.oss-cn-chengdu.aliyuncs.com/first/caiwei/';
		switch (this.myLuckMap.t1.caishen) {
			case '正东':
				this.caishen = caishenUrl + 'dong.png';
				break;
			case '东南':
				this.caishen = caishenUrl + 'dongnan.png';
				break;
			case '东北':
				this.caishen = caishenUrl + 'dongbei.png';
				break;
			case '正北':
				this.caishen = caishenUrl + 'bei.png';
				break;
			case '正南':
				this.caishen = caishenUrl + 'nan.png';
				break;
			case '正西':
				this.caishen = caishenUrl + 'xi.png';
				break;
			case '西北':
				this.caishen = caishenUrl + 'xibei.png';
				break;
			case '西南':
				this.caishen = caishenUrl + 'xinan.png';
				break;
		}
	},
	methods: {},
	onShareAppMessage: function(res) {
		console.log('myid=' + helper.myUserInfo.id);
		if (res.from === 'button') {
			// 来自页面内转发按钮
		}
		return {
			title: '来测一测今日财神方位！',
			path: 'pages/homePage?commentUserId=' + helper.myUserInfo.id
		};
	}
};
</script>

<style lang="scss" scoped>
.content {
	width: 100vw;
	height: 100vh;
	border-style: solid;
	border-width: 18rpx;
	border-color: #d45151;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 20rpx;
	padding-bottom: 20rpx;
	background: #e6dcc8;
}

.content_line {
	width: 90%;
	height: 100%;
	border-style: solid;
	border-width: 9rpx;
	border-color: #d45151;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}

.content_line_first {
	display: flex;
	justify-content: space-between;
}

.content_line_last {
	display: flex;
	justify-content: space-between;
}

.content_lt_view {
	width: 34rpx;
	height: 34rpx;
	background: #d45151;
	margin-left: -17rpx;
	margin-top: -17rpx;
}

.content_rt_view {
	width: 34rpx;
	height: 34rpx;
	background: #d45151;
	margin-right: -17rpx;
	margin-top: -17rpx;
}

.content_lb_view {
	width: 34rpx;
	height: 34rpx;
	background: #d45151;
	margin-left: -17rpx;
	margin-bottom: -17rpx;
	align-self: flex-end;
}

.content_rb_view {
	width: 34rpx;
	height: 34rpx;
	background: #d45151;
	margin-right: -17rpx;
	margin-bottom: -17rpx;
	align-self: flex-end;
}
.context_view {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.img_suancaishen {
	width: 338rpx;
	height: 116rpx;
	margin-top: 30rpx;
}

.img_button {
	width: 384rpx;
	height: 96rpx;
	margin-top: 40rpx;
	background: #e8dccc;
	background-image: url();
	background-size: contain;
	background-repeat: no-repeat;
}

button::after {
	border: none;
}

.animation_caishen {
	animation: chang_caishen 3s ;
}

@keyframes chang_caishen {
	0% {
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg); /*兼容-webkit-引擎浏览器*/
		-moz-transform: rotate(0deg); /*兼容-moz-引擎浏览器*/
	}
	100% {
		transform: rotate(3600deg);
		-webkit-transform: rotate(3600deg); /*兼容-webkit-引擎浏览器*/
		-moz-transform: rotate(3600deg); /*兼容-moz-引擎浏览器*/
	}
}

.animation_chongsha {
	animation: chang_chongsha 4s ;
}

.animation_slogin {
	animation: chang_chongsha 6s ;
}

.animation_lucky {
	animation: chang_chongsha 7s ;
}

@keyframes chang_chongsha{
	0% {
		opacity: 0.0;
	}
	100% {
		opacity: 1.0;
	}
}
</style>
